<template>
  <main id="news">
    <div class="blocks">
      <div class="title-block">
        <h1 v-translate>PeerTube news!</h1>

        <p>
          <span v-translate>Discover the latest PeerTube improvements</span>

          <span v-translate>
            Stay informed by subscribing to <a href="https://framalistes.org/sympa/subscribe/peertube-newsletter" target="_blank">the newsletter</a>
          </span>
        </p>

        <div class="separator"></div>
      </div>

      <div class="news">
        <a class="title" v-translate id="release-2-3-0" href="#release-2-3-0">PeerTube 2.3 is out!</a>
        <div class="date" v-translate>July 24, 2020</div>

        <div class="body">
          <p v-translate>
            Hi everybody,
          </p>

          <p v-translate>
            In early june, we released PeerTube 2.2 and less than two months later we are releasing this 2.3 version.
            We are proud to  move forward so fast on PeerTube development! As we continue to follow
            <a target="_blank" href="https://joinpeertube.org/en_US/roadmap">our roadmap</a>,
            this release incorporates the features we told you about in the latest news.
            Let's look around and see what it brings us...
          </p>

          <h4 v-translate>Global video search is now available</h4>

          <p v-translate>
            Roadmap step 1, the video search on the entire vidiverse is now accessible to everyone.
            By creating this index engine (a tool to index all videos and channels of predefined PeerTube instances),
            we are now allowing instances administrators to set the search bar of their instance to search on the entire (or a portion of) the vidiverse.
          </p>

          <p v-translate>
            For more details about this feature, please read our explanations on
            <a href="https://joinpeertube.org/news#roadmap-v3-part-1-find-videos-global-search" target="_blank">https://joinpeertube.org/news#roadmap-v3-part-1-find-videos-global-search</a>
          </p>

          <figure>
            <img @click="openModal" :src="buildNewsImgUrl('release-2.3', 'global-search.png')" alt="">
          </figure>

          <h4 v-translate>Information banners on instances</h4>

          <p v-translate>
            Broadcast message system that allows instances administrators to display information to people who visit it is now active.
            This is a handy feature to indicate that your instance will be in maintenance on a certain day and that the service might be disrupted... or anything else!
          </p>

          <p v-translate>
            We give you the possibility to display 3 different types of messages:
          </p>

          <ul>
            <li v-translate><i>info</i>: blue text on light blue background</li>
            <li v-translate><i>warning</i>: brown text on light yellow background</li>
            <li v-translate><i>error</i>: red text on light red background</li>
          </ul>

          <figure>
            <img @click="openModal" :src="buildNewsImgUrl('release-2.3', 'banner-information.png')" alt="">
          </figure>

          <figure>
            <img @click="openModal" :src="buildNewsImgUrl('release-2.3', 'banner-warning.png')" alt="">
          </figure>

          <figure>
            <img @click="openModal" :src="buildNewsImgUrl('release-2.3', 'banner-error.png')" alt="">
          </figure>

          <h4 v-translate>Many improvements on accessibility</h4>

          <p v-translate>
            Caroline Chuong (<a target="_blank" href="https://github.com/Pandoraaa">@Pandoraa</a>), consultant at
            <a target="_blank" href="https://www.octo.com/">Octo Technology</a> has proposed several contributions to improve
            PeerTube accessibility. These contributions are essential to bring PeerTube's interfaces accessible to everyone. And as we are
            aware not being accessibility experts, we are really delighted that contributors give us a hand on this aspect.
            A big thank to Caroline for her contributions.
          </p>

          <h4 v-translate>New features on content moderation</h4>

          <p v-translate>
            As indicated in our roadmap, we have spent time improving and adding moderation tools. PeerTube 2.3 includes the ability
            for instances administrators to delete all comments from a fediverse account with a single click. It is also possible to mute an
            account directly from a video thumbnail.
          </p>

          <p v-translate>
            In terms of interface, the video report window has been greatly improved by @rigelk. As a reminder, the video reporting feature
            is accessible if you have an account and are logged in. It is therefore only possible to report videos that you see from the
            instance where you are registered: either because this video is hosted on your instance, or because your instance is federated
            to the instance where the video was uploaded.
          </p>

          <p v-translate>
            This new video report window now includes a checklist of possible reasons for the report and offers you a free writing field to
            specify your report if necessary.
          </p>

          <figure>
            <img @click="openModal" :src="buildNewsImgUrl('release-2.3', 'report-2.2.png')" alt="">
            <figcaption v-translate>PeerTube 2.2 report window</figcaption>
          </figure>

          <figure>
            <img @click="openModal" :src="buildNewsImgUrl('release-2.3', 'report-2.3.png')" alt="">
            <figcaption v-translate>PeerTube 2.3 report window</figcaption>
          </figure>

          <h4 v-translate>Plugins to block or mute instances</h4>

          <p v-translate>
            The <a target="_blank" href="https://framagit.org/framasoft/peertube/official-plugins/-/tree/master/peertube-plugin-auto-mute">auto-mute plugin</a>
            allows to automatically hide accounts and instances from a public list while the
            <a target="_blank" href="https://framagit.org/framasoft/peertube/official-plugins/-/tree/master/peertube-plugin-auto-block-videos">videos-auto-block plugin</a>
            can automatically block videos from a public list.
          </p>

          <p v-translate>
            We haven't yet identified any PeerTube instance administrator who use these plugins and generate a public list.
            But if there is, please let us know on our
            <a target="_blank" href="https://framacolibri.org/t/lists-for-plugin-auto-block-videos-plugin-auto-mute/">forum</a>.
          </p>

          <h4 v-translate>And also:</h4>

          <p v-translate>
            PeerTube is now available in 2 new languages: Vietnamese and Kabyle!
          </p>

          <p v-translate>
            This new release includes many other improvements.
            You can see the complete list on <a target="_blank" href="https://github.com/Chocobozzz/PeerTube/blob/develop/CHANGELOG.md">https://github.com/Chocobozzz/PeerTube/blob/develop/CHANGELOG.md</a>.
          </p>

          <p>
            <translate>Thanks to all PeerTube contributors!</translate>
            <br />
            Framasoft
          </p>
        </div>
      </div>

      <div class="news">
        <a class="title" v-translate id="roadmap-v3-part-1" href="#roadmap-v3-part-1">[V3 Roadmap] Global Search ✅, let's go to moderation tools!</a>
        <div class="date" v-translate>July 2, 2020</div>

        <div class="body">
          <p v-translate>
            Here is another step in the <a href="https://joinpeertube.org/roadmap" target="_blank">PeerTube roadmap</a> leading to v3!
            June has been dedicated to implement a system to enable global video search across PeerTube instances.
            Thank you all for being so many in funding this solution! This allows us to be free minded for the next few weeks to work on moderation tools.
          </p>

          <h4 v-translate id="roadmap-v3-part-1-find-videos-global-search">Find videos more easily with the global search</h4>

          <p v-translate>
            Thanks to <a href="https://joinpeertube.org/roadmap/#support" target="_blank">your support</a> we've been able to develop the system of global video
            search on PeerTube during June. We have published a tool which index all videos and channels from all PeerTube instances
            listed on the <a href="https://joinpeertube.org/instances#instances-list" target="_blank">public directory</a>.
          </p>

          <p v-translate>
            This <a href="https://framagit.org/framasoft/peertube/search-index" target="_blank">index engine code</a> is under FLOSS license so that anyone
            can host their own index engine and set their own eligibility rules. As an example, if you want to set up a search interface
            that only allows you to search for videos hosted on instances dedicated to video games, you will just have to create a list
            including all instances URLs you have selected and put it online. So that the index engine can refer to it and return you
            the appropriate results.
          </p>

          <p v-translate>
            In the next version of the software, each PeerTube instance administrator will be able to choose to use one of
            these index engines to allow specific searches in the search bar of its instance.
          </p>

          <figure>
            <img @click="openModal" :src="buildNewsImgUrl('roadmap-v3-part-1', 'index-search.png')" alt="">
          </figure>

          <p v-translate>
            This index engine has common features with the PeerTube search engine (API). So, you could use this global search system in
            two different ways: by creating a dedicated web interface for it or by integrating it on a PeerTube instance search. We will
            give you more details on this feature on mid-July when we will publish the 2.3 release.
          </p>

          <h4 v-translate>But that's not all!</h4>

          <p v-translate>
            In the last few months, we have created 2 new plugins:
          </p>

          <ul>
            <li v-translate>
              <a target="_blank" href="https://framagit.org/framasoft/peertube/official-plugins/-/tree/master/peertube-plugin-auto-mute">peertube-plugin-auto-mute</a>,
              which allows to automatically hide accounts and instances according to a public list;
            </li>

            <li v-translate>
              <a target="_blank" href="https://framagit.org/framasoft/peertube/official-plugins/-/tree/master/peertube-plugin-auto-block-videos">peertube-plugin-auto-block-videos</a>,
              which allows to automatically block videos from a public list.
            </li>
          </ul>

          <p v-translate>
            We haven't yet identified any PeerTube instance administrator who use these plugins and generate a public list.
            So we are requesting the community to create these lists <a target="_blank" href="https://framacolibri.org/t/lists-for-plugin-auto-block-videos-plugin-auto-mute/8484">on our forum</a>.
          </p>

          <p v-translate>
            Meanwhile, we have developed an information message system which allow PeerTube instance administrators to display
            information to people who visit it. This is very handy to indicate that your instance will be in maintenance on a certain
            day at a certain time and that the service may be disrupted.
          </p>

          <figure>
            <img @click="openModal" :src="buildNewsImgUrl('roadmap-v3-part-1', 'broadcast-message.png')" alt="">
          </figure>

          <h4 v-translate>July: spending time on moderation tools</h4>

          <p v-translate>
            As announced in the roadmap, the upcoming weeks will be dedicated to improve and add moderation tools.
            As each new version of PeerTube has
            <a href="https://joinpeertube.org/faq#peertube-developers-did-not-add-moderation-tools" target="_blank">added new moderation features</a>,
            there is still a lot of work to be done to facilitate contents and accounts management in the fediverse.
            That's why we will take several weeks of development exclusively on this topic.
          </p>

          <p v-translate>
            PeerTube 2.2 version already features improvements on video reporting interface, such as search filters,
            quick actions on videos and accounts, video thumbnails, quick access to embed, etc.
          </p>

          <figure>
            <img @click="openModal" :src="buildNewsImgUrl('roadmap-v3-part-1', 'moderation.jpg')" alt="">
          </figure>

          <p v-translate>
            During July we will continue to develop features such as:
          </p>

          <ul>
            <li v-translate>comments moderation;</li>
            <li v-translate>moderation reports linked to an account;</li>
            <li v-translate>moderation history;</li>
            <li v-translate>returns on actions taken (or not) following a report;</li>
            <li v-translate>fight against spam.</li>
          </ul>

          <p v-translate>
            This list isn't exhaustive and it's possible that we may include other developments, depending on feedback from
            <a href="https://github.com/Chocobozzz/PeerTube/labels/Component%3A%20Moderation%20%3Agodmode%3A" target="_blank">the community</a>.
          </p>

          <h4 v-translate>We still need your support</h4>

          <p v-translate>
            After a boom start during the first few weeks, this rising funds campaign is now stagnating at just over €27,000.
            So we still need your support to finance the third step of development (dedicated to plugins and playlists) which
            will start in August. Also, feel free to share <a href="https://joinpeertube.org/roadmap/" target="_blank">the roadmap</a> around you.
          </p>
        </div>
      </div>

      <article class="news">
        <a class="title" v-translate id="release-2-2-0" href="#release-2-2-0">PeerTube 2.2 is out!</a>
        <div class="date" v-translate>June 03, 2020</div>

        <div class="body">
          <p v-translate>Hi everybody,</p>

          <p v-translate>
            After showcasing our roadmap for PeerTube V3, we are happy to announce that version 2.2 is out. Let's look around and see what it brings us...
          </p>

          <h4 v-translate>Many improvements interface-wise</h4>

          <p v-translate>
            Version 2.2 includes many improvements to make PeerTube's interfaces more pleasant to use.
            The most visible improvement is definitely the <strong>search bar</strong>. Located in the top right, this search bar now offers indications to
            make an efficient search. For instance, you can search for a channel with its name but also by using the @channel_id@domain form.
          </p>

          <figure>
            <img @click="openModal" :src="buildNewsImgUrl('release-2.2', 'search.png')" alt="">
          </figure>

          <p v-translate>
            When you want to download a video on PeerTube (to do this, you just need to click on the three horizontal dots located
            in the menu under the video, and select Download), a window now shows detailed information about the file. This new
            feature is only active for videos uploaded after the release of version 2.2.
          </p>

          <figure>
            <img @click="openModal" :src="buildNewsImgUrl('release-2.2', 'download.png')" alt="">
          </figure>

          <p v-translate>
            Users who aren't logged in now have a <strong>Settings button in the left menu</strong> that will let them customize how
            they use PeerTube:
          </p>

          <ul>
            <li v-translate>using P2P or not,</li>
            <li v-translate>displaying sensitive video thumbnails or not,</li>
            <li v-translate>filtering videos based on language,</li>
            <li v-translate>choosing an interface theme,</li>
            <li v-translate>activating automatic video playback or not,</li>
          </ul>

          <figure>
            <img @click="openModal" :src="buildNewsImgUrl('release-2.2', 'settings.png')" alt="">
          </figure>

          <p v-translate>
            Another very convenient improvement: you can now drag and drop to upload a video file. No need to click
            "Select file" anymore, you only need to use your mouse, touchpad or fingers to <strong><em>drag and drop</em></strong>
            your video file from your hard drive.
          </p>

          <p v-translate>
            <strong>Video imports via URL have been improved</strong>: you can now import subtitles and even get the video license and language.
            Quite useful when you want to duplicate a video from another PeerTube instance while keeping all the metadata.
          </p>

          <figure>
            <img @click="openModal" :src="buildNewsImgUrl('release-2.2', 'import-url.jpg')" alt="">
          </figure>

          <p v-translate>
            We already offered a markdown editor to, for instance, <strong>format text in the <em>Description</em> field</strong> when you upload a video.
            We have improved upon this editor to make it more clear, and we added a fullscreen mode.
          </p>

          <figure>
            <img @click="openModal" :src="buildNewsImgUrl('release-2.2', 'description.jpg')" alt="">
          </figure>

          <p v-translate>
            PeerTube also allows you to <strong>import audio files</strong>. Quite a nice feature to share musical arrangements or podcasts without having
            to make a clip. When you upload the audio file, it is even possible to add an illustrative picture that will be fused with the file.
            However, be careful because the picture you choose will be definitive and you will not be able to change it.
          </p>

          <p v-translate>
            As the administrator of an instance, you will have acces to a <strong>new interface to manage duplicated videos via the redundancy system</strong>.
            You can now see a list of the videos from your instance that have duplicated onto other instances. But most importantly,
            we now show you a list of videos you have duplicated and we show you how much space they take with graphs (aren't our pie charts pretty?).
          </p>

          <figure>
            <img @click="openModal" :src="buildNewsImgUrl('release-2.2', 'redundancies.jpg')" alt="">
          </figure>

          <p v-translate>
            <strong>The video abuses management interface</strong> has also been improved: we added research filters, quick actions you can
            take regarding videos and accounts, video thumbnails in the chart, quick access to embed, etc.
          </p>

          <figure>
            <img @click="openModal" :src="buildNewsImgUrl('release-2.2', 'moderation.png')" alt="">
          </figure>

          <p v-translate>
            The majority of these improvements have come to be thanks to external contribution from @rigelk et @kimsible. Big thanks to the two of them!
          </p>

          <h4 v-translate>New plugins for varied experiences</h4>

          <p v-translate>
            In this new version, we have made it possible for plugins to <strong>define external authentication methods</strong>
            and developed 3 authentication plugins:
          </p>

          <ul>
            <li>
              <a href="https://framagit.org/framasoft/peertube/official-plugins/-/tree/master/peertube-plugin-auth-ldap" target="_blank">LDAP</a>
            </li>

            <li>
              <a href="https://framagit.org/framasoft/peertube/official-plugins/-/tree/master/peertube-plugin-auth-openid-connect" target="_blank">OpenID</a>
            </li>

            <li>
              <a href="https://framagit.org/framasoft/peertube/official-plugins/-/tree/master/peertube-plugin-auth-saml2" target="_blank">SAMLv2</a>
            </li>
          </ul>

          <p v-translate>
            Thus, it is now possible to authenticate users via an external server (OpenID or SAMLv2 compatible) or via an LDAP directory.
            This work was made possible thanks to funding from the <em>"Direction du Numérique pour l'Éducation du Ministère de l'Éducation et de la Jeunesse" (France)</em>.
          </p>

          <p v-translate>
            We also added <strong>some <em>hooks</em> (entry points towards actions lists) to the plugins system</strong>,
            which will allow developers to create new plugins dedicated to moderation:
          </p>

          <ul>
            <li v-translate>deleting a video,</li>
            <li v-translate>validating a URL/torrent import,</li>
            <li v-translate>ability to hide/unhide an instance or an account,</li>
            <li v-translate>blacklisting or unblacklisting a video.</li>
          </ul>

          <p v-translate>
            From these additions a plugin was born, still in testing to this day: <a href="https://framagit.org/framasoft/peertube/official-plugins/-/tree/master/peertube-plugin-auto-mute" target="_blank">peertube-plugin-auto-mute</a>,
            which allows you to automatically hide accounts and instances depending on a public list.
            If you want other admins to be able to use your public list of accounts and instances to hide,
            do not hesitate to make a pull request on the plugin's README.
          </p>

          <h4 v-translate>And also:</h4>

          <p v-translate>
            This v2 adds <strong>HTML support (on top of text mode) in emails</strong> sent by PeerTube,
            making them less austere and avoiding bugs where links would get shortened.
          </p>

          <figure>
            <img @click="openModal" :src="buildNewsImgUrl('release-2.2', 'mail.jpg')" alt="">
          </figure>

          <p v-translate>
            The admin of a PeerTube instance can choose to auto follow other instances.
            Before, the majority of admins used this feature to automatically follow all the instances in the
            public index (which causes moderation issues). It is now possible for anyone to share a list of instances
            (on github, gitlab, pastebin, etc.) so that the admins of a PeerTube instance can use that list's web address
            to make their instance automatically follow the instances of that shared list. This lets users create auto follow
            lists within small groups.
          </p>

          <p v-translate>
            And finally, we improved the embed API, allowing websites that embed a PeerTube video to have better control over the player:
            knowing the video's length, knowing when playback is over, exporting video subtitles, indicating a specific subtitle to activate.
            More info on <a href="https://docs.joinpeertube.org/#/api-embed-player" target="_blank">https://docs.joinpeertube.org/#/api-embed-player</a>.
          </p>

          <p v-translate>
            This new release includes many other improvements.
            You can see the complete list (in English) on <a href="https://github.com/Chocobozzz/PeerTube/blob/develop/CHANGELOG.md" target="_blank">https://github.com/Chocobozzz/PeerTube/blob/develop/CHANGELOG.md</a>.
          </p>

          <p>
            <translate>Thanks to all those who contribute to PeerTube!</translate>
            <br />
            Framasoft.
          </p>
        </div>
      </article>

      <article class="news">
        <a class="title" v-translate id="roadmap-v3" href="#roadmap-v3">Roadmap to PeerTube's v3</a>
        <div class="date" v-translate>May 27, 2020</div>

        <div class="body">
          <p v-translate>
            Yesterday, we've published our <a href="https://joinpeertube.org/roadmap" target="_blank">new roadmap to PeerTube's v3</a>
            detailing key features such as:
          </p>

          <ul>
            <li v-translate>global search</li>
            <li v-translate>moderation tools</li>
            <li v-translate>plugin & playlists</li>
            <li v-translate>peer-to-peer live streaming</li>
          </ul>

          <p v-translate>
            Please read <a href="https://framablog.org/2020/05/26/our-plans-for-peertube-v3-progressive-fundraising-live-streaming-coming-next-fall">our blogpost</a>
            to learn more about our choices about the next 6 months of development.
          </p>

          <p v-translate>This PeerTube v3 should be published on november, 2020.</p>

          <p v-translate>
            In the meantime,we hope you will <a href="https://joinpeertube.org/roadmap" target="_blank">share and support this new JoinPeertube roadmap</a>.
          </p>

          <p>
            <translate>Freely,</translate>
            <br />
            Framasoft
          </p>
        </div>
      </article>

      <article class="news">
        <a class="title" v-translate id="release-2-1-0" href="#release-2-1-0">PeerTube 2.1 is out!</a>
        <div class="date" v-translate>February 12, 2020</div>

        <div class="body">
          <p v-translate>Hi everybody,</p>
          <p v-translate>
            A few months after PeerTube V2 announcement, we are pleased to announce you that version 2.1 has been released.
            Here's a quick overview of the features it brings...
          </p>

          <h4 v-translate>An even more pleasant interface</h4>
          <p v-translate>
            We are continually striving to improve PeerTube's interface by collecting users opinions so that we know what is causing them
            trouble (in terms of understanding and usability for example). Firstly, even if it's no big deal, we have added a small animation
            on the videos when you play and pause them. We really like this little development! We also worked on the different icons
            graphics on the video viewing page. The icons and buttons are now more refined and you can also see the icons
            <em>I like / I don't like</em> without being connected. It provides users to understand how they can interact with the video.
          </p>

          <figure>
            <img @click="openModal" :src="buildNewsImgUrl('release-2.1', 'icons-ui.png')" alt="">
          </figure>

          <p v-translate>
            When you are logged in and put your mouse on videos' thumbnails, a small clock-shaped icon appears in the thumbnail's upper
            right corner to display Watch Later. Click it to add the video to your Watch Later playlist.
          </p>

          <figure>
            <img @click="openModal" :src="buildNewsImgUrl('release-2.1', 'watch-later.png')" alt="">
          </figure>

          <p v-translate>
            We also improved the contents' layout of PeerTube presentation page located in About category / PeerTube tab. On this page,
            you now have easy access to PeerTube documentation, to the various apps available and to the PeerTube Contribution Guide.
          </p>

          <figure>
            <img @click="openModal" :src="buildNewsImgUrl('release-2.1', 'about.png')" alt="">
          </figure>

          <h4 v-translate>An enhanced documentation</h4>

          <p v-translate>
            We are aware that documenting software allows more people to use it. That's why we added many contents to the
            <a href="https://docs.joinpeertube.org" target="_blank">PeerTube documentation</a>.
            PeerTube's administrators can now find information on how to use remote storage, how to manage videos' redundancy between
            instances and how to use PeerTube logs to understand what happens on their instances.
            We also added information on the various available features to customize an instance's interface, on moderation tools and how to mute instances or accounts.
          </p>

          <p v-translate>
            Because providing a video player easily integrated into any web environment is essential for us, PeerTube now provides a library
            for developers to control the integration of a video player via the <a href="https://docs.joinpeertube.org/#/api-embed-player" target="_blank">PeerTube Embed API</a>.
          </p>

          <h4 v-translate>Developments on comments</h4>

          <p v-translate>
            Interactivity with users is one of the recipes to success on videos platforms. Interacting with Internet users and responding to
            comments helps content producers to build an audience. That's why this latest version includes enhancements that help video
            makers to interact more with their viewers.
          </p>

          <p v-translate>
            First, the comments' graphic layout has been modified: it is now easier to find your way between original comments and answers.
            Avatars' visuals placed next to each user name have been improved and the display name (and its identifier) are now more readable.
            When a video maker responds to a comment on one of his videos, it is easier to identify him or her because his name is highlighted.
          </p>

          <figure>
            <img @click="openModal" :src="buildNewsImgUrl('release-2.1', 'comments-ui.png')" alt="">
          </figure>

          <p v-translate>
            It is now possible to display comments according to 2 criteria: the most recent first (default display) or most replies first.
          </p>

          <figure>
            <img @click="openModal" :src="buildNewsImgUrl('release-2.1', 'comments-sort.png')" alt="">
          </figure>

          <p v-translate>
            Another news: you can now write comments in Markdown language in a restricted syntax.
          </p>

          <p v-translate>
            Finally, we added an <em>Options</em> menu underneath users' comments to mute an account or an instance very easily.
          </p>

          <figure>
            <img @click="openModal" :src="buildNewsImgUrl('release-2.1', 'comments-options.png')" alt="">
          </figure>

          <h4 v-translate>More features</h4>

          <p v-translate>
            As some of you asked us, we added a new privacy mode. You can now choose to broadcast a video in <strong>internal</strong> mode: the video
            is available only for connected users to the instance on which the video is uploaded. This feature allows a video to be
            watched only by a group of friends, family or work.
          </p>

          <p v-translate>
            PeerTube now automatically generates hyperlinks when a time code is mentioned in the video description or comments.
            Handy for mentioning a part of the video or making a chapter in the description!
          </p>

          <figure>
            <img @click="openModal" :src="buildNewsImgUrl('release-2.1', 'timecode.png')" alt="">
          </figure>

          <p v-translate>
            Finally, the collaborative translation of PeerTube's contents is now done using <a href="https://weblate.framasoft.org/projects/peertube/" target="_blank" rel="noreferrer noopener">Weblate</a>,
            which is much more powerful and pleasant to use than the tool we we're using until now (Zanata).
          </p>

          <p v-translate>
            This new release includes many other improvements. You can see the complete list on
            <a href="https://github.com/Chocobozzz/PeerTube/releases/tag/v2.1.0" target="_blank" rel="noopener noreferrer">https://github.com/Chocobozzz/PeerTube/releases/tag/v2.1.0</a>
          </p>

          <p>
            <translate>Thanks to all PeerTube contributors!</translate>
            <br />
            Framasoft
          </p>
        </div>
      </article>

      <article class="news">
        <a class="title" v-translate id="release-2-0-0" href="#release-2-0-0">Release of PeerTube v2, and redesign of JoinPeertube</a>
        <div class="date" v-translate>November 12, 2019</div>

        <div class="body">
          <p v-translate>Hello,</p>

          <p v-translate>
            After a year of work and improvements, we have just released version 2 of PeerTube! Everything is explained in detail in the
            <a target="_blank" rel="noopener noreferrer" href="https://framablog.org/2019/11/12/peertube-has-worked-twice-as-hard-to-free-your-videos-from-youtube/">Framablog article</a>
            that we invite you to read.
          </p>

          <p v-translate>We present, among other things:</p>

          <ul>
            <li v-translate>features and improvements since v1 of November 2018;</li>
            <li v-translate>work to facilitate the federation and presentation of proceedings;</li>
            <li v-translate>the new version of <a target="_blank" rel="noopener noreferrer" href="https://joinpeertube.org">JoinPeertube</a>, which is enriched by this work;</li>
            <li v-translate><a target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org">PeerTube's official documentation site</a> (administration and use);</li>
            <li v-translate>our desires and projects for the future of PeerTube (we are considering a new crowdfunding, and dreaming of a video-remix tool and of live streaming!).</li>
          </ul>

          <p v-translate>
            These improvements are the result of the many contributions of the members of the PeerTube community (thank you!),
            but also of a year of work that we have financed through
            <a target="_blank" rel="noopener noreferrer" href="https://soutenir.framasoft.org">donations that support all of our association's projects</a>,
            currently in a <a target="_blank" rel="noopener noreferrer" href="https://contributopia.org/journal">donation campaign</a>.
          </p>

          <p>
            <translate>Freely,</translate>
            <br />
            Framasoft.
          </p>
        </div>
      </article>

      <article class="news">
        <a class="title" v-translate id="release-1-4-0" href="#release-1-4-0">PeerTube 1.4 is out!</a>
        <div class="date" v-translate>September 25, 2019</div>

        <div class="body">
          <p v-translate>Hi everybody,</p>
          <p v-translate>Peertube 1.4 just came out! Here's a quick overview of what's new…</p>

          <h4 v-translate>Plug-in system</h4>
          <p v-translate>
            Since PeerTube's launch, we have been aware that every administrator and user wishes to see the software fulfill their needs.
            As Framasoft cannot and will not develop every feature that could be hoped for, we have from the start of the project planned
            on creating a plug-in system.
          </p>

          <p v-translate>
            We are pleased to announce that the foundation stones of this system have been laid in this 1.4 release! It might be very basic
            for now, but we plan on improving it bit by bit in Peertube's future releases.
          </p>

          <p v-translate>
            Now, this system allows each administrator to <b>create specific plug-ins</b> depending on their needs. They may install
            extensions created by other people on their instance as well. For example, it is now possible to install community created
            graphical themes to change the instance visual interface.
          </p>

          <h4 v-translate>A better interface</h4>
          <p v-translate>
            We strive to improve PeerTube's interface by collecting users' opinions so that we know what is causing them trouble
            (in terms of understanding and usability for example). Even though this is a time-consuming undertaking,
            this new release already offers you a few modifications.
          </p>

          <p v-translate>
            First of all, we realized that most people who discover PeerTube have a hard time understanding
            <b>the difference between a channel and an account</b>.
            Indeed, on others video broadcasting services (such as YouTube) these two things are pretty much the same.
          </p>

          <p v-translate>
            However, on PeerTube each account is linked to one or multiple channels that can be named as the users sees fit. You also have
            to create at least one channel when creating an account. Once the channels have been created, users can upload videos to each
            channel to organize their contents (for example, you could have a channel about cooking and another one about biking).
          </p>

          <figure>
            <img @click="openModal" :src="buildNewsImgUrl('release-1.4', 'channel.png')" alt="2 channels on Framasoft's account on FramaTube instance">
            <figcaption v-translate>2 channels on Framasoft's account on FramaTube instance</figcaption>
          </figure>

          <p v-translate>
            In order to make this channel idea more understandable, we have changed the sign-up form, which from now on consists of two
            steps:
          </p>

          <ul>
            <li v-translate>Step 1: account creation (choosing your username, password, email, etc.)</li>
            <li v-translate>Step 2: choosing your default channel name via a new form</li>
          </ul>

          <figure>
            <img @click="openModal" :src="buildNewsImgUrl('release-1.4', 'account-creation.png')" alt="the new sign-up form in 2 steps">
            <figcaption v-translate>the new sign-up form in 2 steps</figcaption>
          </figure>

          <ul>
            <li v-translate>
              We also aimed to differentiate a channel homepage from that of an account. These two pages used to list videos, whereas now
              the account homepage lists all the channel linked to the account by showing under each channel name the thumbnail from the
              last videos uploaded on it.
            </li>
            <li v-translate>
              Another unclear element was the <b>video sharing pop-up</b>. We have improved it, and it is now possible to share or embed a
              video by making it start and/or finish at a precise moment (time-code feature), to decide which subtitles will appear by
              default, and to loop the video. These new options will surely be greatly enjoyed.
            </li>
          </ul>

          <figure>
            <img @click="openModal" :src="buildNewsImgUrl('release-1.4', 'share-popup.png')" alt="customization options when video sharing">
            <figcaption v-translate>customization options when video sharing</figcaption>
          </figure>

          <h4 v-translate>More features</h4>

          <p v-translate>
            Our wonderful community of translators is once again to thank for their work, after they enriched PeerTube with
            <b>3 new languages</b>: Finnish, Greek and Scottish Gaelic, making PeerTube now available in 22 languages.
          </p>

          <p v-translate>
            We also added a new feature allowing you to <b>upload an audio file</b> directly to PeerTube: the software will automatically
            create a video from the audio file. This much awaited for feature should make life easier for music makers :)
          </p>

          <p v-translate>
            This new release includes many other improvements. You can see the complete list on
            <a target="_blank" rel="noopener noreferrer" href="https://github.com/Chocobozzz/PeerTube/releases/tag/v1.4.0">
              https://github.com/Chocobozzz/PeerTube/releases/tag/v1.4.0
            </a>.
          </p>

          <p>
            <translate>Thanks to all PeerTube contributors!</translate>
            <br />
            Framasoft
          </p>
        </div>
      </article>

      <article class="news">
        <a class="title" v-translate id="release-1-3-0" href="#release-1-3-0">PeerTube 1.3 is out!</a>
        <div class="date" v-translate>June 5, 2019</div>

        <div class="body">
          <p v-translate>Hello!</p>

          <p v-translate>We've just released PeerTube 1.3 and it brings a lot of new features.</p>

          <p v-translate>
            The most important of these new features is <strong>the playlist system</strong>. This feature allows any user to create a
            playlist in which it's possible to add videos and reorder them. Videos added to a playlist can be viewed entirely or partially:
            the creator of the playlist can decide when the video playback starts and/or ends (timecode system). This system is really
            useful to create all kinds of zappings or educational contents by selecting extracts from videos which interest you. In
            addition, a "Watch Later" playlist is created by default for each user. Thus, you can save videos in this playlist when you
            don't have time to watch them immediately.
          </p>

          <p v-translate>
            Another feature of this 1.3 version has been entirely developed by an external contributor:
            <a target="_blank" rel="noopener noreferrer" href="https://github.com/joshmorel">Josh Morel</a> who add <strong>a quarantine system</strong> for videos on PeerTube. If the
            administrator of an instance enables this feature, any new video uploaded on his instance will automatically be hidden until a
            moderator approves it.
          </p>

          <p v-translate>
            PeerTube translation community have done a huge job. <strong>3 new languages</strong> are now available: Japanese, Dutch and
            European Portuguese (PeerTube already support Brazilian Portuguese). Amazing! PeerTube is now available in 19 languages!
          </p>

          <p v-translate>
            Now, administrators can <strong>manage more finely how other instances subscribe to their own instance</strong>. The
            administrator can decide whether or not to approve the subscription of another instance to its own. It is also possible to
            activate automatic rejection for any new subscription to its instance. Finally, a notification is created as soon as the
            administrator's instance receives a new subscription. These features help administrators control on which instances their
            content is displayed.
          </p>

          <p v-translate>
            We're also redesigning the <strong>PeerTube video player</strong> to offer better video playback and to correct a few bugs.
            With this new player, resolution changes should be smoother and the bandwidth management is optimized with a more efficient
            buffering system. Version 1.3 of PeerTube also adds ability for administrators to enable this new experimental player so we can
            get feedback on it. We hope to use this new player by default in the future.
          </p>

          <p v-translate>
            Finally, we have made some adjustments to the <strong>user interface</strong> so it easier and nicer to use. For instance,
            video thumbnails are becoming bigger so that they're more highlighted. Users now have a quick access to their library from the
            menu that includes their playlists, videos, video watching history and their subscriptions.
          </p>

          <p v-translate>
            Many other improvements have been made in this new version. You can see the complete list on
            <a target="_blank" rel="noopener noreferrer" href="https://github.com/Chocobozzz/PeerTube/releases/tag/v1.3.0">https://github.com/Chocobozzz/PeerTube/releases/tag/v1.3.0</a>.
          </p>

          <p>
            <translate>Thanks to all PeerTube contributors!</translate>
            <br />
            Framasoft
          </p>
        </div>
      </article>

      <article class="news">
        <a class="title" v-translate id="release-since-1-0-0" href="#release-since-1-0-0">PeerTube: retrospective, new features and more to come!</a>
        <div class="date" v-translate>February 26, 2019</div>

        <div class="body">
          <p v-translate>
            Since version 1.0 has been released last November, we went on improving PeerTube, day after day. These improvements on PeerTube
            go well beyond the objectives fixed during the crowdfunding. They have been funded by the
            <a target="_blank" rel="noopener noreferrer" href="https://framasoft.org">Framasoft non-profit</a>, which develops the software (and lives only
            through <a target="_blank" rel="noopener noreferrer" href="https://soutenir.framasoft.org">your donations</a>).
          </p>

          <p v-translate>Here is a small retrospective of the end of 2018/beginning of 2019:</p>

          <p>
            <translate>In December 2018, we released version 1.1 which contained some moderation tools requested by instance administrators.</translate>
            <br />
            <translate>We also took the opportunity to add a watched videos history feature and the automatic resuming of video playback.</translate>
          </p>

          <p v-translate>
            In January, we released version 1.2 that supports 3 new languages: Russian, Polish and Italian. Thanks to PeerTube's community
            of translators, PeerTube is now translated into 16 different languages!
          </p>

          <p v-translate>
            This version also includes a notification system that allows users to be informed (on the web interface or through email) when
            their video is commented, when someone mention them, when one of their subscriptions has published a new video, etc.
          </p>

          <p v-translate>
            In the meantime, the PeerTube federation has grown: today, more than 300 instances broadcast more than 70,000 videos, with
            nearly 2 million cumulated views. We remind you that the only official website we maintain around PeerTube is
            <a target="_blank" rel="noopener noreferrer" href="https://joinpeertube.org/en">https://joinpeertube.org/en</a> and that we bear no responsibility on any other site that
            may be published.
          </p>

          <p>
            <translate>As you can see, we have gone far beyond what the crowdfunding has funded. And we will continue!</translate>
            <br />
            <translate>
              For 2019, we plan to add a  plugin and theme management system (even though basic at first), playlist management,
              support for audio files upload and many other features.
            </translate>
          </p>

          <p v-translate>
            If you also to contribute to the growing of PeerTube, you can participate in its funding here:
            <a target="_blank" rel="noopener noreferrer" href="https://soutenir.framasoft.org/en">https://soutenir.framasoft.org/en</a>
          </p>

          <p v-translate>
            If you have any questions, feel free to use our forum:
            <a target="_blank" rel="noopener noreferrer" href="https://framacolibri.org/c/peertube">https://framacolibri.org/c/peertube</a>
          </p>

          <p>
            <translate>Thanks to all PeerTube contributors!</translate>
            <br />
            Framasoft
          </p>
        </div>

      </article>

      <article class="news">
        <a class="title" v-translate id="crowdfunding-4" href="#crowdfunding-4">PeerTube crowdfunding newsletter #4</a>
        <div class="date" v-translate>October 16, 2018</div>

        <div class="body">
          <p v-translate>Hello everyone!</p>

          <p v-translate>We are now in mid-October! As promised, we have just released the first stable version of PeerTube.</p>

          <p v-translate>It implements all stretch goals we planned in our crowdfunding:</p>
          <ul>
            <li v-translate>Localization support (as we write these lines, PeerTube is already available in 13 different languages!)</li>
            <li v-translate>Subtitles support</li>
            <li v-translate>Ability to import videos through an URL (YouTube, Vimeo, Dailymotion and many others!)</li>
            <li v-translate>Ability to import a video through a torrent file or a magnet URI</li>
            <li v-translate>
              RSS feeds, allowing you to track new videos published in all federated PeerTube instances, in a specific PeerTube instance
              or in a video channel you like. You can also subscribe to comment feeds!
            </li>
            <li v-translate>A more relevant search, with the ability to set advanced filters (duration, category, tags...)</li>
            <li v-translate>
              Subscriptions throughout the federation: you can follow your favorite video channels and see all the videos on a dedicated
              page
            </li>
            <li v-translate>Redundancy system: a PeerTube instance can help sharing some videos from another instance</li>
          </ul>

          <p v-translate>We know that feature descriptions are not very amusing, so we have published a few demonstration videos:</p>
          <ul>
            <li>
              <a v-translate target="_blank" rel="noopener noreferrer" href="https://framatube.org/videos/watch/f57da309-6b92-4fe0-9267-ff8188cc050c">RSS Feeds</a>
            </li>

            <li>
              <a v-translate target="_blank" rel="noopener noreferrer" href="https://framatube.org/videos/watch/dcad56d9-9fe6-45bc-96aa-3d778f6804c1">Torrent import</a>
            </li>

            <li>
              <a v-translate target="_blank" rel="noopener noreferrer" href="https://framatube.org/videos/watch/59d306c0-fc5b-493a-956a-43785693346b">YouTube video import</a>
            </li>

            <li>
              <a v-translate target="_blank" rel="noopener noreferrer" href="https://framatube.org/videos/watch/edd7a468-08d5-4877-b62b-61c5f3f83ceb">Adding subtitles</a>
            </li>

            <li>
              <a v-translate target="_blank" rel="noopener noreferrer" href="https://framatube.org/videos/watch/60c4bea4-6bb2-4fce-8d9f-8a522575419d">Advanced search</a>
            </li>

            <li>
              <a v-translate target="_blank" rel="noopener noreferrer" href="https://framatube.org/videos/watch/8968dbe1-a387-433b-a20f-37fe9f3ca8d5">Video channel subscriptions</a>
            </li>
          </ul>

          <p v-translate>
            This is the last newsletter regarding the PeerTube crowdfunding. We would like to thank you one more time, for allowing us
            to greatly improve PeerTube, and therefore to promote a more decentralized web. But the journey does not end here: we will
            continue to work on the software, and there is still a lot to do to fully free up video streaming. But before anything, we'll
            take a few days off ;)
          </p>

          <p v-translate>
            We remind you that you can ask questions on <a target="_blank" rel="noopener noreferrer" href="https://framacolibri.org/c/qualite/peertube">the PeerTube forum</a>. You
            can also contact us directly on <a target="_blank" rel="noopener noreferrer" href="https://contact.framasoft.org"> https://contact.framasoft.org</a>.
          </p>

          <p>
            <translate>Cheers,</translate>
            <br />
            Framasoft
          </p>
        </div>
      </article>

      <article class="news">
        <a class="title" v-translate id="crowdfunding-3" href="#crowdfunding-3">PeerTube crowdfunding newsletter #3</a>
        <div class="date" v-translate>September 12, 2018</div>

        <div class="body">
          <p v-translate>Hello everyone!</p>

          <p v-translate>A month before the version 1 of PeerTube, we would like to share some (good!) news with you.</p>

          <p v-translate>
            We just released PeerTube <em>beta 12</em>, that allows to subscribe to video channels, whether they are on your instance or
            even on remote instances. This way, you can browse videos of your subscribed channels in a dedicated page. Moreover, if your
            PeerTube administrator allows it, you can search a channel or a video directly by typing their web address in the PeerTube
            search bar.
          </p>

          <p v-translate>
            It was not included in the crowdfunding, but we created an "Overview" page, that displays videos of some
            categories/tags/channels picked randomly, to show the diversity of the videos uploaded on PeerTube. You can see
            <a target="_blank" rel="noopener noreferrer" href="https://peertube3.cpy.re/videos/overview">a demonstration here</a>.
          </p>

          <p v-translate>
            You can read the complete <em>beta 12</em> changelog <a
            href="https://github.com/Chocobozzz/PeerTube/blob/develop/CHANGELOG.md#v100-beta12">here</a>.
          </p>

          <p v-translate>
            Regarding the crowdfunding, most of the rewards are ready: <a target="_blank" rel="noopener noreferrer" href="https://github.com/Chocobozzz/PeerTube">the PeerTube
            README</a> and <a target="_blank" rel="noopener noreferrer" href="https://joinpeertube.org/hall-of-fame">the JoinPeerTube Hall of Fame</a> show off the names of the
            persons who have chosen the corresponding rewards. We will soon be able to send the personalized thank-you digital arts to
            people that gave 80€ (~93 USD) and more (and it's so beautiful that we are looking forward to it!).
          </p>

          <p v-translate>
            The last feature we have to implement is the videos redundancy between instances, which will further increase resilience on
            instance overload. If all goes well, we should finish it in about two weeks (end of september).
          </p>

          <p v-translate>
            We remind you that you can track the progress of the work directly <a target="_blank" rel="noopener noreferrer" href="https://github.com/Chocobozzz/PeerTube"> on the git
            repository</a>, and be part of the discussions/bug reports/feature requests in the "Issues" tab.
          </p>

          <p v-translate>
            Moreover, you can ask questions on <a target="_blank" rel="noopener noreferrer" href="https://framacolibri.org/c/qualite/peertube">the PeerTube forum</a>. You can also
            contact us directly on <a target="_blank" rel="noopener noreferrer" href="https://contact.framasoft.org">https://contact.framasoft.org.</a>
          </p>

          <p>
            <translate>Cheers,</translate>
            <br />
            Framasoft
          </p>
        </div>
      </article>

      <article class="news">
        <a class="title" v-translate id="crowdfunding-2" href="#crowdfunding-2">PeerTube crowdfunding newsletter #2</a>
        <div class="date" v-translate>August 20, 2018</div>

        <div class="body">
          <p v-translate>Hello everyone!</p>

          <p v-translate>The development of the crowdfunding features is going well.</p>

          <p v-translate>
            As a reminder, in the first newsletter (July 23rd, 2018), we announced that the localization system and RSS feeds were
            implemented, and that we were making progress on the subtitles support and the advanced search.
          </p>

          <p v-translate>
            These four features are all implemented, and can already be used on instances updated to version <em>v1.0.0-beta.10</em> (for
            example <a target="_blank" rel="noopener noreferrer" href="https://framatube.org">https://framatube.org</a>). Regarding the subtitles support, you can test them on the
            <a target="_blank" rel="noopener noreferrer" href="https://framatube.org/videos/watch/217eefeb-883d-45be-b7fc-a788ad8507d3"> the "What is PeerTube"</a> video.
          </p>

          <p>
            <translate>
              We are currently finishing the video import system, from a URL (YouTube, Vimeo etc) or a torrent file. This feature should be
              available in a few days, when we will release a new version (v1.0.0-beta.11).
            </translate>
            <br />
            <translate>
              The import system will complete the first crowdfunding goal. The next feature we will be working on will be the user subscriptions.
            </translate>
          </p>

          <p v-translate>
            We remind you that you can track the progress of the work directly <a target="_blank" rel="noopener noreferrer" href="https://github.com/Chocobozzz/PeerTube"> on the git
            repository</a>, and be part of the discussions/bug reports/feature requests in the "Issues" tab.
          </p>

          <p v-translate>
            Moreover, you can ask questions on <a target="_blank" rel="noopener noreferrer" href="https://framacolibri.org/c/qualite/peertube">the PeerTube forum</a>. You can also
            contact us directly on <a target="_blank" rel="noopener noreferrer" href="https://contact.framasoft.org">https://contact.framasoft.org.</a>
          </p>

          <p>
            <translate>Cheers,</translate>
            <br />
            Framasoft
          </p>
        </div>
      </article>

      <article class="news">
        <a class="title" v-translate id="crowdfunding-1" href="#crowdfunding-1">PeerTube crowdfunding newsletter #1</a>
        <div class="date" v-translate>July 23, 2018</div>

        <div class="body">
          <p v-translate>Hello everyone!</p>

          <p v-translate>First of all, thank you again for contributing to PeerTube! ❤️</p>

          <p v-translate>
            During the crowdfunding campaign, we continued to work on the localization system. And we are happy to announce it's
            finally completed: it will be available in the next beta (beta 10) of PeerTube. As of this writing, the web interface is
            already available in english, french, basque, catalan, czech and esperanto (huge thank you to all of the translators).
            If you too want to help translating PeerTube, do not hesitate to check out the documentation!
          </p>

          <p v-translate>
            Regarding the RSS feeds feature, it was already implemented by Rigelk and you can already use it in the beta 9.
            You can, for example, get the feed of the last local videos uploaded in a particular instance.
          </p>

          <p v-translate>
            Subtitles support is well under way, and we should have a first version available soon.
            When this work is finished, we will develop the advanced search.
          </p>

          <p v-translate>
            We remind you that you can track the progress of the work directly on the git repository, and be part of the discussions/bug
            reports/feature requests in the "Issues" tab.
          </p>

          <p v-translate>
            Moreover, you can ask questions on <a target="_blank" rel="noopener noreferrer" href="https://framacolibri.org/c/qualite/peertube">the PeerTube forum</a>. You can also
            contact us directly on <a target="_blank" rel="noopener noreferrer" href="https://contact.framasoft.org">https://contact.framasoft.org.</a>
          </p>

          <p>
            <translate>Cheers,</translate>
            <br />
            Framasoft
          </p>
        </div>
      </article>

    </div>

    <div id="modal" @click="closeModal()" v-bind:class="{ 'hide-modal': hideModal }">
      <img :src="modalImgSrc" />

      <div class="caption">{{ modalCaption }}</div>
    </div>
  </main>
</template>

<style lang="scss">
  @import '../scss/_variables.scss';

  #news {
    p {
      margin-bottom: 10px;
    }

    p + *:not(ul) {
      margin-top: 1em;
    }

    .blocks {
      margin: 60px auto;
    }

    .title-block {
      margin-bottom: 60px;

      a {
        border-bottom: none;
        font-weight: $font-semibold;
        color: #000;
      }

      p > span {
        display: block;
      }
    }

    .news {
      max-width: 800px;
      padding: 40px 50px;
      border: solid 1px #d9d9d9;
      border-left: 6px solid $orange;
      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.35);
      margin-bottom: 60px;

      .title {
        font-size: 24px;
        color: #000 !important;
      }

      .date {
        font-size: 16px;
      }

      .body {
        margin-top: 40px;
      }

      a {
        word-break: break-word;
      }

      figure {
        margin: 30px 0;
        border: 10px solid #fff3ea;
        border-bottom: 0;

        img {
          cursor: pointer;
          max-width: 100%;
          height: auto;
          margin-bottom: 5px;
        }

        figcaption {
          font-size: 14px;
          background: #fff3ea;
          text-align: center;
          padding: 10px 0;
        }
      }

      @media screen and (max-width: $small-screen) {
        padding: 10px;
      }
    }

    #modal {
      &.hide-modal {
        display: none;
      }

      position: fixed;
      z-index: 1;
      padding-top: 5vh;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgb(0, 0, 0);
      background-color: rgba(0, 0, 0, 0.9);

      img {
        margin: auto;
        display: block;
        height: auto;
        width: auto;
        max-height: 90%;
      }

      .caption {
        margin: auto;
        display: block;
        width: 80%;
        max-width: 700px;
        text-align: center;
        color: #ccc;
        padding: 10px;
      }

      img,
      .caption {
        animation-name: zoom;
        animation-duration: 0.6s;
      }
    }
  }
</style>

<script>
  export default {
    components: { },

    data: function () {
      return {
        imageLocales: {
          'release-1.4': {
            en: true,
            fr: true
          },
          'release-2.1': {
            en: true,
            fr: true
          },
          'release-2.2': {
            en: true,
            fr: true
          },
          'roadmap-v3-part-1': {
            en: true,
            fr: true
          },
          'release-2.3': {
            en: true,
            fr: true
          }
        },

        hideModal: true,
        modalImgSrc: '',
        modalCaption: ''
      }
    },

    methods: {
      buildNewsImgUrl: function (newsId, img) {
        let locale = 'en'

        const current = this.$language.current.toLowerCase().split('_')[0]
        if (this.imageLocales[newsId][current]) locale = current

        return this.buildImgUrl(`news/${newsId}/${locale}/${img}`)
      },

      openModal: function (event) {
        const img = event.target

        this.hideModal = false
        this.modalImgSrc = img.src
        this.modalCaption = img.alt
      },

      closeModal: function () {
        this.hideModal = true
        this.modalImgSrc = ''
        this.modalCaption = ''
      }
    },

    metaInfo: function () {
      return {
        title: this.$gettext('News')
      }
    }
  }
</script>
